<template>
  <div class="container">
    <!-- 溯源码查询提示 -->
    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-4 md:p-8">
      <div class="flex flex-col md:flex-row items-center gap-4 md:gap-8">
        <div class="w-full md:w-64 h-48 rounded-lg overflow-hidden">
          <img src="../../assets/image/溯源流程.png" class="w-full h-full object-cover" alt="溯源码示例" />
        </div>
        <div class="flex-1">
          <h3 class="text-xl font-medium text-gray-800 mb-4">快速溯源查询</h3>
          <p class="text-gray-600 mb-6">
            每件商品都有独特的溯源码，您可以通过输入商品包装上的溯源码（例如：7297265235813994496），快速查询商品的生产、流通等全链路信息。
          </p>
          <div class="flex flex-col sm:flex-row gap-4">
            <div class="relative flex-1 max-w-full sm:max-w-xs">
              <input type="text" v-model="searchQuery"
                class="w-full h-12 pl-12 pr-4 text-gray-700 bg-white border-none rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                placeholder="请输入溯源码" maxlength="26" />
              <el-icon class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
                <CircleCheck />
              </el-icon>
            </div>
            <el-button type="primary" class="h-12 !rounded-button whitespace-nowrap" @click="handleSearch">
              <el-icon class="mr-1">
                <Search />
              </el-icon>
              溯源查询
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <div v-if="showProductContent">
      <!-- 产品详情区域 -->
      <div class="mx-auto px-3 md:px-6">
        <div class="flex items-center justify-between">
          <h4 class="font-medium">数据概览</h4>
          <div class="flex items-center text-emerald-500 cursor-pointer hover:text-emerald-600"
            @click="showCertificate = true">
            <i class="el-icon-info" style="color: #1890ff"></i>
            <span>查看数据存证</span>
          </div>
        </div>
      </div>
      <div class="mx-auto px-3 md:px-6">
        <div class="bg-white rounded-xl shadow-sm p-4 md:p-8 border border-gray-200">
          <div class="flex flex-col md:flex-row gap-6 md:gap-12">
            <!-- 产品图片 -->
            <div
              class="relative w-full md:w-80 h-64 md:h-126 overflow-hidden rounded-lg shadow-md cursor-pointer mx-auto md:mx-0"
              @click="showPreview = true">
              <img :src=productionInfo.productPhotoUrl
                class="w-full h-full object-cover object-top hover:scale-105 transition-transform duration-300"
                alt="产品主图" />
            </div>
            <!-- 产品信息 -->
            <div class="flex-1">
              <h2 class="text-xl md:text-2xl font-medium mb-4">
                {{ productionInfo.productName }}
              </h2>
              <div class="space-y-3 text-gray-500">
                <div class="flex items-center">
                  <span class="w-24">生产时间：</span>
                  <span> {{ productionInfo.createTime }}</span>
                </div>
                <div class="flex items-center">
                  <span class="w-24">产品编号：</span>
                  <span class="mr-2"> {{ productionInfo.cropsId }}</span>
                  <el-button type="info" size="small" @click="copyProductId" class="!rounded-button whitespace-nowrap">
                    复制编号
                  </el-button>
                </div>
              </div>
              <!-- 产品特征卡片 -->
              <div class="grid grid-cols-1 sm:grid-cols-3 gap-2 mt-8 md:mt-12">
                <div class="p-2 bg-gray-50 rounded-lg text-center transition-all duration-300 hover:shadow-md">
                  <i class="el-icon-trophy text-4xl text-amber-400 mb-4"></i>
                  <div class="text-gray-800">品质： {{ productionInfo.qualityLevel }}</div>
                </div>
                <div class="p-2 bg-gray-50 rounded-lg text-center transition-all duration-300 hover:shadow-md">
                  <i class="el-icon-trophy text-4xl text-amber-400 mb-4"></i>
                  <div class="text-gray-800">规格：{{ productionInfo.size }}</div>
                </div>
                <div class="p-2 bg-gray-50 rounded-lg text-center transition-all duration-300 hover:shadow-md">
                  <i class="el-icon-trophy text-4xl text-amber-400 mb-4"></i>
                  <div class="text-gray-800">材质：{{ productionInfo.ingredient }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 溯源阶段 -->
      <div class="mx-auto mt-8 px-3 md:px-8 pb-12">
        <el-timeline>
          <!-- 养殖阶段 -->
          <el-timeline-item :timestamp=worm.createTime placement="top" :hollow="true" icon=" el-icon-more"
            color="#1890ff">
            <el-card>
              <template #header>
                <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center">
                  <h4>养殖阶段</h4>
                  <el-button type="primary" plain class="!rounded-button mt-2 sm:mt-0" @click="showDetail('breeding')">
                    查看详情
                  </el-button>
                </div>
              </template>
              <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
                <div>
                  <p class="text-gray-500">蚕种类型</p>
                  <p>{{ worm.wormType }}</p>
                </div>
                <div>
                  <p class="text-gray-500">孵化周期</p>
                  <p>{{ worm.hatchingPeriod }}</p>
                </div>
                <div>
                  <p class="text-gray-500">蜕皮周期</p>
                  <p>{{ worm.moltingPeriod }}</p>
                </div>
                <div>
                  <p class="text-gray-500">养殖地点</p>
                  <p>{{ worm.farmingPlace }}</p>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
          <!-- 质检阶段 -->
          <el-timeline-item :timestamp=machingCheckInfo.createTime placement="top" icon=" el-icon-more" color="#1890ff">
            <el-card>
              <template #header>
                <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center">
                  <h4>质检阶段</h4>
                  <el-button type="primary" plain class="!rounded-button mt-2 sm:mt-0"
                    @click="showDetail('inspection')">
                    查看详情
                  </el-button>
                </div>
              </template>
              <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
                <div>
                  <p class="text-gray-500">入库时间</p>
                  <p>{{ machingCheckInfo.inFactoryTime }}</p>
                </div>
                <div>
                  <p class="text-gray-500">质检时间</p>
                  <p>{{ machingCheckInfo.outFactoryTime }}</p>
                </div>
                <div>
                  <p class="text-gray-500">检测结果</p>
                  <p class="text-green-600">{{ machingCheckInfo.testingResult }}</p>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
          <!-- 加工阶段 -->
          <el-timeline-item :timestamp=operationRecords[0].operationDate placement="top" icon=" el-icon-more"
            color="#1890ff">
            <el-card>
              <template #header>
                <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center">
                  <h4>加工阶段</h4>
                  <el-button type="primary" plain class="!rounded-button mt-2 sm:mt-0"
                    @click="showDetail('processing')">
                    查看详情
                  </el-button>
                </div>
              </template>
              <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
                <div>
                  <p class="text-gray-500">产品编号</p>
                  <p>{{ productionInfo.cropsId }}</p>
                </div>
                <div>
                  <p class="text-gray-500">加工日期</p>
                  <p>{{ operationRecords[0].operationDate }}</p>
                </div>
                <div>
                  <p class="text-gray-500">工艺流程</p>
                  <p>缫丝、织造、染色、整理、包装</p>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
          <!-- 零售阶段 -->
          <el-timeline-item :timestamp=retailerReceiveInfo.createTime placement="top" icon=" el-icon-more"
            color="#1890ff">
            <el-card>
              <template #header>
                <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center py-0">
                  <h4>零售阶段</h4>
                </div>
              </template>
              <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
                <div>
                  <p class="text-gray-500">经销商</p>
                  <p>{{ retailerReceiveInfo.deptName }}</p>
                </div>
                <div>
                  <p class="text-gray-500">入库时间</p>
                  <p>{{ retailerReceiveInfo.createTime }}</p>
                </div>
                <div>
                  <p class="text-gray-500">联系电话</p>
                  <p>{{ retailerReceiveInfo.phone }}</p>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    <!-- 图片预览弹窗 -->
    <el-dialog :visible.sync="showPreview" width="95%" custom-class="preview-dialog">
      <img src="../../assets/image/scaves.jpg" class="w-full" alt="产品主图预览" />
    </el-dialog>
    <!-- 数据存证凭证弹窗 -->
    <el-dialog :visible.sync="showCertificate" title="数据存证凭证" width="95%" custom-class="certificate-dialog">
      <div class="relative p-4 md:p-12 bg-cover bg-center border-4 border-amber-100 rounded-lg" style="
          background-image: url('https://bpic.51yuansu.com/backgd/cover/00/20/49/5b96f4ae27d46.jpg?x-oss-process=image/resize,h_360,m_lfit/sharpen,100');
        ">
        <div class="bg-white/90 p-4 md:p-8 rounded-lg backdrop-blur-sm">
          <div class="text-center mb-6 md:mb-12">
            <h3 class="text-xl md:text-3xl font-bold text-gray-800 mb-2">
              区块链数据存证凭证
            </h3>
            <p class="text-gray-500">Certificate of Blockchain Data</p>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8 px-2 md:px-10">
            <div class="space-y-3 md:space-y-6">
              <div class="flex flex-col md:flex-row md:items-center">
                <span class="w-full md:w-30 text-gray-600">存证编号：</span>
                <span class="font-medium text-gray-800">CERT202502130450</span>
              </div>
              <div class="flex flex-col md:flex-row md:items-center">
                <span class="w-full md:w-30 text-gray-600">存证时间：</span>
                <span class="text-gray-800">{{ retailerReceiveInfo.createTime }}</span>
              </div>
              <div class="flex flex-col md:flex-row md:items-center">
                <span class="w-full md:w-30 text-gray-600">存证类型：</span>
                <span class="text-gray-800">HASH上链</span>
              </div>
              <div class="flex flex-col md:flex-row md:items-center">
                <span class="w-full md:w-30 text-gray-600">区块哈希：</span>
                <span class="text-gray-800 break-all">{{ retailerReceiveInfo.blockHash }}</span>
              </div>
            </div>
            <div class="space-y-3 md:space-y-6">
              <div class="flex flex-col md:flex-row md:items-center">
                <span class="w-full md:w-30 text-gray-600">区块链网络：</span>
                <span class="text-gray-800">金融级、国产安全可控的联盟链</span>
              </div>
              <div class="flex flex-col md:flex-row md:items-center">
                <span class="w-full md:w-30 text-gray-600">区块高度：</span>
                <span class="text-gray-800">{{ retailerReceiveInfo.blockNumber }}</span>
              </div>
              <div class="flex flex-col md:flex-row md:items-center">
                <span class="w-full md:w-30 text-gray-600">溯源节点：</span>
                <span class="text-gray-800">已完成全链路认证</span>
              </div>
            </div>
          </div>
          <div class="mt-4 md:mt-8 space-y-4 px-2 md:px-8">
            <div class="bg-amber-50 p-4 rounded-lg">
              <h4 class="text-amber-800 font-medium mb-2">溯源信息</h4>
              <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 text-sm">
                <div class="flex items-center">
                  <i class="el-icon-circle-check" style="color: #1890ff"></i>
                  <span>原料供应商认证</span>
                </div>
                <div class="flex items-center">
                  <i class="el-icon-circle-check" style="color: #1890ff"></i>
                  <span>生产工艺认证</span>
                </div>
                <div class="flex items-center">
                  <i class="el-icon-circle-check" style="color: #1890ff"></i>
                  <span>质量检验认证</span>
                </div>
                <div class="flex items-center">
                  <i class="el-icon-circle-check" style="color: #1890ff"></i>
                  <span>物流运输认证</span>
                </div>
                <div class="flex items-center">
                  <i class="el-icon-circle-check" style="color: #1890ff"></i>
                  <span>销售渠道认证</span>
                </div>
                <div class="flex items-center">
                  <i class="el-icon-circle-check" style="color: #1890ff"></i>
                  <span>售后服务认证</span>
                </div>
              </div>
            </div>
          </div>
          <div class="flex justify-between items-center mt-6 md:mt-12">
            <div class="w-24 h-24 md:w-32 md:h-32">
              <img :src="certificateStamp" class="w-full h-full object-contain opacity-70" alt="证书章" />
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog :visible.sync="dialogVisible" :title="dialogTitle" width="95%" custom-class="detail-dialog">
      <div class="p-4">
        <div v-if="currentStage === 'breeding'" class="space-y-6">
          <div class="bg-gray-50 p-4 rounded-lg">
            <h4 class="font-medium mb-4">蚕宝宝生长记录</h4>
            <el-timeline>
              <el-timeline-item v-for="(record, index) in wormGrowths" :key="index" :timestamp=record.createTime
                size="large" type="primary" placement="top">
                <div class="bg-white p-4 rounded-lg shadow-sm">
                  <h5 class="text-lg font-medium text-blue-600 mb-3">
                    {{ record.growthStage }}
                  </h5>
                  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-4">
                    <div>
                      <p class="text-gray-500">光照时长</p>
                      <p class="font-medium">{{ record.illumination }}</p>
                    </div>
                    <div>
                      <p class="text-gray-500">温度</p>
                      <p class="font-medium">{{ record.temperature }}</p>
                    </div>
                    <div>
                      <p class="text-gray-500">湿度</p>
                      <p class="font-medium">{{ record.humidness }}</p>
                    </div>
                  </div>
                  <p class="text-gray-700 mb-4">{{ record.notes }}</p>
                  <div class="overflow-hidden rounded-lg">
                    <img :src="record.picturePath" :alt="record.growthStage" class="w-full h-48 object-cover" />
                  </div>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
        <div v-if="currentStage === 'inspection'" class="space-y-6">
          <div class="bg-gray-50 p-4 rounded-lg">
            <h4 class="font-medium mb-4">检测项目详情</h4>
            <!-- 产品图片 -->
            <div class="relative overflow-hidden rounded-lg shadow-md cursor-pointer" @click="showPreview = true">
              <img :src=machingCheckInfo.testingPhotoUrl
                class="w-full h-full object-cover object-top hover:scale-105 transition-transform duration-300"
                alt="质量检测报告" />
            </div>
          </div>
        </div>
        <div v-if="currentStage === 'processing'" class="space-y-6">
          <div class="bg-gray-50 p-4 rounded-lg">
            <h4 class="font-medium mb-4">工艺流程详情</h4>
            <el-steps :active="5" finish-status="success" direction="vertical" :simple="$screen.xs">
              <el-step v-for="(step, index) in operationRecords" :key="index" :title="step.workContent" />
            </el-steps>
            <div class="mt-8">
              <div v-for="(step, index) in operationRecords" :key="index"
                class="mb-8 bg-white rounded-lg shadow-sm overflow-hidden">
                <div class="p-4 border-b">
                  <h5 class="text-lg font-medium text-blue-600">
                    {{ step.workContent }}
                  </h5>
                  <p class="mt-2 text-gray-600">{{ step.remarks }}</p>
                </div>
                <div class="aspect-video">
                  <img :src="step.operateUrl" :alt="step.workContent" class="w-full h-full object-cover" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="currentStage === 'retail'" class="space-y-6">
          <div class="bg-gray-50 p-4 rounded-lg">
            <h4 class="font-medium mb-4">产品详细信息</h4>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <p class="text-gray-500">材质</p>
                <p>100% 桑蚕丝</p>
              </div>
              <div>
                <p class="text-gray-500">克重</p>
                <p>12mm</p>
              </div>
              <div>
                <p class="text-gray-500">工艺</p>
                <p>真丝提花</p>
              </div>
              <div>
                <p class="text-gray-500">图案</p>
                <p>传统祥云纹</p>
              </div>
            </div>
          </div>
          <div class="bg-gray-50 p-4 rounded-lg">
            <h4 class="font-medium mb-4">仓储信息</h4>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <p class="text-gray-500">仓库位置</p>
                <p>杭州市西湖区丝绸专业仓储中心</p>
              </div>
              <div>
                <p class="text-gray-500">存储条件</p>
                <p>恒温恒湿</p>
              </div>
              <div>
                <p class="text-gray-500">入库时间</p>
                <p>2025-01-10</p>
              </div>
              <div>
                <p class="text-gray-500">库存状态</p>
                <p>充足</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { queryBlockTraceByTraceId } from "../../api/trace/retailer";
  import { Message } from "element-ui";
  export default {
    data() {
      return {
        showProductContent: false,
        searchQuery: "",
        showPreview: false,
        showCertificate: false,
        productImage:
          "https://public.readdy.ai/ai/img_res/7e74e895c205e10a763e690864dbe306.jpg",
        certificateStamp:
          "https://public.readdy.ai/ai/img_res/494003eaad0f988db065acbf80e4befc.jpg",
        features: ["品质等级—等品", "规格均码", "材质100%真丝"],


        worm: {},
        wormGrowths: [],
        machingCheckInfo: {},
        productionInfo: {},
        operationRecords: [],
        retailerReceiveInfo: {},
        currentTime: "2025-02-12 15:29",
        logoUrl:
          "https://public.readdy.ai/ai/img_res/c85c9e13a3f4f15e48d22c52a456aff2.jpg",
        qrCodeUrl:
          "https://public.readdy.ai/ai/img_res/87ee3a803e27b17ea9b2fc63e38e2324.jpg",
        dialogVisible: false,
        currentStage: "",
        breedingRecords: [
          {
            stage: "蚁蚕期",
            time: "2024-10-01",
            light: "12小时/天",
            temperature: "24°C",
            humidity: "75%",
            content: "蚕宝宝刚刚孵化，体型细小如蚂蚁，开始投喂细嫩的桑叶",
            image:
              "https://public.readdy.ai/ai/img_res/3cee16be2362e03e445d6c0863b572b7.jpg",
          },
          {
            stage: "一龄蚕",
            time: "2024-10-05",
            light: "14小时/天",
            temperature: "25°C",
            humidity: "80%",
            content: "第一次蜕皮后，食欲明显增加，开始大量进食嫩桑叶",
            image:
              "https://public.readdy.ai/ai/img_res/a408aa3deb675134e9333e01a4ef3704.jpg",
          },
          {
            stage: "二龄蚕",
            time: "2024-10-10",
            light: "13小时/天",
            temperature: "23°C",
            humidity: "70%",
            content: "体型继续增大，对桑叶的需求量显著提升",
            image:
              "https://public.readdy.ai/ai/img_res/138e829ee1dd34f2ea751e153ac26d8c.jpg",
          },
          {
            stage: "熟蚕期",
            time: "2024-10-15",
            light: "11小时/天",
            temperature: "22°C",
            humidity: "65%",
            content: "即将开始结茧，体型达到最大，停止进食准备吐丝",
            image:
              "https://public.readdy.ai/ai/img_res/07d1b57c505f70a18b93403d60304dc2.jpg",
          },
        ],

        processSteps: [
          {
            name: "缫丝",
            description: "将蚕茧放入温水中，找到丝头后将丝线缫下来的过程",
            image:
              "https://public.readdy.ai/ai/img_res/b892e9282fb82af0fb5d88ce2483e3db.jpg",
          },
          {
            name: "织造",
            description: "使用织机将丝线编织成布料的工艺过程",
            image:
              "https://public.readdy.ai/ai/img_res/091ae529ec698cd09d1a2ff055732e6f.jpg",
          },
          {
            name: "染色",
            description: "使用天然染料对丝绸进行染色处理",
            image:
              "https://public.readdy.ai/ai/img_res/73c38ebf69bb7e6a7a2047d740d8e3f7.jpg",
          },
          {
            name: "整理",
            description: "对织物进行蒸煮、水洗、定型等后整理工序",
            image:
              "https://public.readdy.ai/ai/img_res/bca0c7a61e51fa03ab07723537c08e65.jpg",
          },
          {
            name: "成品检验",
            description: "对成品进行全面质量检测和外观检查",
            image:
              "https://public.readdy.ai/ai/img_res/a4813c5185d31b37e058f24db16afa0c.jpg",
          },
        ],
      };
    },
    computed: {
      dialogTitle() {
        const titles = {
          breeding: "养殖阶段详情",
          inspection: "质检阶段详情",
          processing: "加工阶段详情",
          retail: "零售阶段详情",
        };
        return titles[this.currentStage] || "";
      },
    },

    methods: {
      // search() {
      //   queryBlockTraceByTraceId(this.searchQuery, this.$store.getters.name).then(
      //     (res) => {
      //       this.worm = res.data.worm;
      //       this.wormGrowths = res.data.wormGrowths;
      //       this.machingCheckInfo = res.data.machingCheckInfo;
      //       this.productionInfo = res.data.productionInfo;
      //       this.operationRecords = res.data.operationRecords;
      //       this.retailerReceiveInfo = res.data.retailerReceiveInfo;
      //     }
      //   );
      // },
      showDetail(stage) {
        this.currentStage = stage;
        this.dialogVisible = true;
      },
      verifyBlockchain() {
        Message({
          message: "区块链验证通过，产品信息真实有效",
          type: "success",
        });
      },
      downloadCertificate() {
        Message({
          message: "凭证下载中...",
          type: "success",
        });
      },
      copyProductId() {
        navigator.clipboard.writeText("729529660177649776");
        Message({
          message: "产品编号已复制到剪贴板",
          type: "success",
        });
      },
      handleSearch() {
        if (!this.searchQuery) {
          Message({
            message: "请输入产品编号",
            type: "warning",
          });
          return;
        }
        queryBlockTraceByTraceId(this.searchQuery, this.$store.getters.name).then(
          (res) => {
            this.worm = res.data.worm;
            this.wormGrowths = res.data.wormGrowths;
            this.machingCheckInfo = res.data.machingCheckInfo;
            this.productionInfo = res.data.productionInfo;
            this.operationRecords = res.data.operationRecords;
            this.retailerReceiveInfo = res.data.retailerReceiveInfo;
          }
        );
        this.showProductContent = true;
      },
    },
  };
</script>

<style scoped>
@import "../..//assets/tailwind.css";

.container {
  padding: 20px;
  background-color: #f9f9f9;
}

.data-overview {
  background-color: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}

.overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.verification-status {
  display: flex;
  align-items: center;
  color: #42b983;
}

.product-container {
  padding: 20px 0;
}

.product-name {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 10px;
}

.product-img {
  width: 100%;
  max-width: 150px;
  display: block;
  margin: 0 auto;
}

.product-info span {
  display: block;
  margin-bottom: 5px;
}

.production-stats {
  margin-top: 15px;
}

.stat-card {
  background-color: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

.stat-card:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.stat-value span:first-child {
  color: #666;
  font-size: 14px;
  margin-bottom: 5px;
}

.stat-value span:last-child {
  font-size: 16px;
  font-weight: 500;
}

.carbon-footprint-details {
  background-color: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}

.trace-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #333;
}

.timeline-item {
  padding: 10px 0;
}

.trace-card {
  background-color: #f9f9f9;
  border: 1px solid #e4e7ed;
  border-radius: 5px;
  padding: 15px;
}

.app-container {
  min-height: 100vh;
  background-color: #f9fafb;
}

header {
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.header-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
}

.header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo {
  height: 3rem;
  width: 3rem;
  object-fit: cover;
}

h1 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #111827;
}

.subtitle {
  font-size: 0.875rem;
  color: #6b7280;
}

.main-content {
  max-width: 1280px;
  margin: 2rem auto;
  padding: 0 2rem;
}

.info-card {
  background: white;
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.footer {
  background: white;
  border-top: 1px solid #e5e7eb;
  padding: 2rem 0;
}

.footer-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.footer-section h4 {
  font-weight: 500;
  margin-bottom: 1rem;
}

.footer-section p {
  font-size: 0.875rem;
  color: #6b7280;
}

.el-timeline {
  padding: 0;
}

.el-card {
  border-radius: 8px;
}

.el-dialog__body {
  padding: 0;
}

.timeline-item {
  margin-bottom: 2rem;
}

.qr-code-container {
  background: #f3f4f6;
  padding: 1rem;
  border-radius: 0.5rem;
  text-align: center;
}

.qr-code {
  width: 6rem;
  height: 6rem;
}

.button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
}

.detail-section {
  margin-bottom: 1.5rem;
  background: #f9fafb;
  padding: 1rem;
  border-radius: 0.5rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.detail-item {
  margin-bottom: 0.5rem;
}

.detail-label {
  color: #6b7280;
  font-size: 0.875rem;
}

.detail-value {
  color: #111827;
  margin-top: 0.25rem;
}

.status-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
}

.status-success {
  background-color: #d1fae5;
  color: #065f46;
}

.status-error {
  background-color: #fee2e2;
  color: #991b1b;
}
</style>
